<template>
    <div>
    <Menu></Menu>
    <Div class="address">
    <div class="xm-edit-addr-box" id="J_editAddrBox" style="width:500px; top: 219px; left: 345.2px; display: block;margin-left:20px">


        <div class="bd">
            <div class="gerenmsg">
                <p>
                    订单信息 <a href="">修改</a>
                </p>
                <p>
                    <span>邮箱</span>
                    <span class="dizhi">123456@qq.com</span>
                </p>
                <p>
                    <span>送货地址</span>
                    <span class="dizhi">“详细地址” “市”，“邮编”“国家” “省”</span>
                </p>
                <p>
                    <span>邮寄方式</span>
                    <span>免费送货</span>
                    <span>$ 0.00</span>
                </p>
            </div>
            <div>
                <div class="xuandrop" style="display: block;">
                    <ul>
                        <p>颜色</p>
                        <li>
                            信用卡
                        </li>
                        <li class="active">
                            PayPal
                        </li>

                    </ul>

                </div>
            </div>
            <div class="item">

                <input type="text" name="userAddress[tel]" class="input"  placeholder="卡号" autocomplete="off">
                <p class="tel-modify-tip" id="telModifyTip"></p>
                <p class="tip-msg tipMsg"></p>
            </div>

            <div class="item">

                <input type="text" name="userAddress[tag]" id="Tag" class="input" placeholder="卡主姓名">
                <p class="tip-msg tipMsg"></p>
            </div>

            <div class="item">

                <input type="text" name="userAddress[consignee]"  class="xinginput input" placeholder="有效期（MM/YY）" maxlength="15" autocomplete="off">
                <input type="text" name="userAddress[consignee]" class="xinginput  input" placeholder="安全码" maxlength="15" autocomplete="off">
                <p class="tip-msg tipMsg"></p>
            </div>


        </div>
        <div class="item" style="height: 40px">

        </div>
        <p style="padding-top: 10px">
            <a href="" class="back">>返回</a>
            <a class="jixu">付款</a>
        </p>
    </div>
    <Div class=" addressL">
        <p class="addtit">商品信息</p>
        <div>
            <ul class="shopbot">
                <li class="shop1">
                    <div class="shop1L">
                        <img src="../assets/img/banner.png">
                        <div class="spnum">1</div>

                    </div>
                    <div class="sop1R">
                        <p class="shopaname">商品名称</p>
                        <p class="shopades">商品名称</p>
                    </div>
                </li>
                <li class="shop2">￥1.00</li>

            </ul>
            <ul class="shopbot">
                <li class="shop1">
                    <div class="shop1L">
                        <img src="../assets/img/banner.png">
                        <div class="spnum">1</div>

                    </div>
                    <div class="sop1R">
                        <p class="shopaname">商品名称</p>
                        <p class="shopades">商品名称</p>
                    </div>
                </li>
                <li class="shop2">￥1.00</li>

            </ul>

        </div>
        <div class="youhuima">
            <input type="text" >
            <input type="button"  class="yhmbtn" value="使用优惠码">
        </div>
        <p class="jixoaji">
            <span >小计</span>
            <span class="xjmoney">$10</span>
        </p>
        <p class="jixoaji">
            <span >运费</span>
            <span class="xjmoney">下一步计算</span>
        </p>
        <p class="zongji">
            <span >总计</span>
            <span class="xjmoney">$10</span>
        </p>

    </Div>

</Div>
</div>

</template>
  
<script>
import Menu from './Menu'
export default {
   components: {Menu},
    methods:{}
};
</script>

<style lang="less" scoped>
@media screen and (max-width: 1024px) {
  @import url(../assets/css/mobile_productpayment.less);
}
    @media screen and (min-width: 1024px) {
  @import url(../assets/css/pc_productpayment.less);
}
</style>